/*
 * @Description: 首页标题栏-云卡
 * @Author: tao.xie
 * @Date: 2019-06-11 15:46:12
 * @Last Modified by: tao.xie
 * @Last Modified time: 2019-06-14 15:01:25
 */
<template>

  <title-bar
    titleText="云公交卡"
    :needBorder="needBorder"
  >
    <i
      slot="left"
      class="icon iconfont icon-back back-btn"
      @click="back"
    ></i>
    <i
      v-if="showRightIcon"
      class="icon iconfont icon-consumption"
      slot="right"
      @click="_pushToConsumePage"
    ></i>
  </title-bar>
</template>

<script>
import { TitleBar } from 'vue-xb-ui-depot'

import { CARD_FREEZON, CARD_OPEN } from '../api/api.js'

export default {
  props: {
    needBorder: {
      type: Boolean,
      default: false
    }
  },
  components: {
    TitleBar
  },
  methods: {
    back() {
      this.$router.back()
    },
    _pushToConsumePage() {
      if (window.onMenuSelect) {
        window.onMenuSelect(0)
      }
    }
  },
  computed: {
    showRightIcon() {
      let state = this.$store.getters.cardState
      return state === CARD_FREEZON || state === CARD_OPEN
    }
  }
}
</script>

<style>
.title-text {
  color: #333333;
}
.icon-consumption {
  height: 98px;
  line-height: 98px;
  padding: 0px 30px;
  position: absolute;
  right: 0px;
  z-index: 2;
  font-size: 40px;
}
.back-btn {
  font-size: 40px;
  font-weight: bold;
  padding: 0 30px;
  height: 98px;
  line-height: 98px;
  position: absolute;
  left: 0;
  z-index: 2;
}
</style>
